<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1226">
    <title>购物车</title>
    <!-- 引入图标库-->
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!--    &lt;!&ndash;bootstrap&ndash;&gt;-->
<!--    <link rel="stylesheet" th:href="@{/static/resource/css/lib/bootstrap.min.css}"/>-->

    <!--bootstrap-->
    <link rel="stylesheet" th:href="@{/static/pear-admin/bootstrap.css}"/>

    <!--    引入alibaba iconfont-->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2608271_v7p87hrx9q.css">

<!--    引入购物车css-->
    <link type="text/css" rel="stylesheet" th:href="@{/static/pear-admin/css/style.css}" />

    <!--css-->
    <link rel="stylesheet" th:href="@{/static/resource/css/reset.css}"/>
    <link rel="stylesheet" th:href="@{/static/resource/css/index.css}"/>
    <link rel="stylesheet" th:href="@{/static/resource/css/home.css}"/>
    <!--    layui-->
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">


    <style>
        .topbar a:hover{
            color: orange;
        }
        /***** head页面头部 start*/
        .head {
            font-size: 12px;
            height: 102px;
            border-bottom: 2px solid #ff6700;
            background: #fff;
            color: #b0b0b0;
        }
        .head_log{
            margin-right: 55px;
        }
        .head_log img{
            width: 48px;
            height: 48px;
        }
        .head_title {
            float: left;
            margin: 26px 0 0 0;
        }
        .head_title h1{
            color: #424242;
            font-size: 28px;
            height: 48px;
            line-height: 48px;
        }
        .head_login{
            float: right;
            margin: 26px 0 0 0;
            line-height: 48px;
        }
        .head_register{
            display: inline-block;
            margin-left: 15px;
        }
        /***** head页面头部 end*/

        /***** footer 页面底部 start*/
        /*footer  footer_service*/
        .footer_service{
            padding: 30px 0;
            overflow: hidden;
            border-bottom: 1px solid #e0e0e0;
        }
        .footer_service ul{
            margin-right: -2px;
        }
        .footer_service ul li{
            float: left;
            width: 20%;
            height: 25px;
            font-size: 16px;
            line-height: 25px;
            border-right: 1px solid #e0e0e0;
            text-align: center;
        }

        /*footer  footer_link*/
        .footer_link{
            padding: 40px 0;
        }
        .footer_link dl{
            float: left;
            width: 160px;
            height: 112px;
            margin: 0;
        }
        .footer_link dt{
            margin: -1px 0 26px;
            font-size: 14px;
            line-height: 1.25;
            color: #424242;
        }
        .footer_link dd{
            margin: 10px 0 0;
            font-size: 12px;
        }

        .footer_contact{
            float: right;
            width: 245px;
            height: 112px;
            border-left: 1px solid #e0e0e0;
            text-align: center;
            color: #616161;
        }
        .footer_contact .phone{
            font-size: 26px;
            color: #ff6700;
        }

        .footer_site{
            background: #f5f5f5;
        }
        .footer_site p{
            margin: 32px 0;
            text-align: center;
        }
        /***** footer 页面底部 end*/


        /* 下拉框*/

        .dropbtn {
            border: none;
            cursor: pointer;
        }

        .dropdown {
            position: relative;
            display: inline-block;
            z-index: 100;
            margin-left:25px
        }

        .dropdown-content {
            display: none;
            background-color: #f9f9f9;
            min-width: 50px;
            overflow: auto;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        .dropdown-content a {
            color: black;
            text-decoration: none;
            display: block;
        }

        .dropdown a:hover {background-color: #f1f1f1}

        .show {display:block;}

    </style>


</head>


<body>
<!-- jquery.js angular.js-->
<script th:src="@{/static/resource/lib/jquery.min.js}"></script>
<script th:src="@{/static/resource/lib/angular.js}"></script>

<!--头部工具栏-->
<div class="topbar">
    <div class="container">
        <div class="topbar_nav fl">
            <ul>
                <li><a th:href="@{/web/index/}">首页</a></li>
                <li><a th:href="@{/web/couponsActivity/toCouponsActivity}">领劵中心</a></li>
                <li><a th:href="@{/web/seckill/toSearchSeckillPage}">秒杀</a></li>
                <li><a href="https://github.com/youzhengjie9/cloud-mall">项目链接</a></li>
            </ul>
        </div>
        <div class="topbar_cart fr">
            <a href="/web/cart/tocart">购物车</a>
        </div>
        <div class="topbar_cart fr">
            <a href="/web/order/toOrderPage">我的订单</a>
        </div>
        <div class="topbar_cart fr">
            <a href="/web/seckill/toSeckillSuccessList">秒杀成功订单</a>
        </div>
        <div class="topbar_info fr" style="width:220px">
            <form name="logoutform" th:action="@{/web/logout/logout}" method="post"></form>
            <a class="nav-link" th:href="@{/web/register/toregister}">注册</a>
            <a class="nav-link" sec:authorize="isAnonymous()" th:href="@{/web/login/toLoginPage}">登录</a>
            <a sec:authorize="isAuthenticated()" class="nav-link dropbtn" onclick="myFunction()">[[${username}]]</a>
            <a href="#" onclick="kefu(1)">人工客服</a>
            <div class="dropdown">
                <div id="myDropdown" class="dropdown-content" style="width: 120px;height: 70px">
                    <a th:href="@{/web/center/toBaseInfo}" style="width: 100px;height: 30px;">个人中心</a>
                    <a href="javascript:document.logoutform.submit();" style="width: 100px;height: 30px;">退出登录</a>
                </div>
            </div>
        </div>
    </div>
</div>



<!--  购物车-->


<div class="shopping-car-container">
    <div class="car-headers-menu">
        <div class="row">
            <div class="col-md-1 car-menu">
                <label><input type="checkbox" id="check-goods-all" /><span id="checkAll">全选</span></label>
            </div>
            <div class="col-md-3 car-menu">商品信息</div>
            <div class="col-md-3 car-menu">商品参数</div>
            <div class="col-md-1 car-menu">单价</div>
            <div class="col-md-1 car-menu">数量</div>
            <div class="col-md-1 car-menu">金额</div>
            <div class="col-md-2 car-menu">操作</div>
        </div>
    </div>
    <div class="goods-content">
        <!--goods display-->
    </div>
    <div class="panel panel-default">
        <div class="panel-body bottom-menu-include">
            <div class="col-md-1 check-all-bottom bottom-menu">
                <label>
                    <input type="checkbox" id="checked-all-bottom" />
                    <span id="checkAllBottom">全选</span>
                </label>
            </div>
            <div class="col-md-1 bottom-menu">
				<span id="deleteMulty">
						删除
				</span>
            </div>
            <div class="col-md-6 bottom-menu">

            </div>
            <div class="col-md-2 bottom-menu">
                <span>已选商品 <span id="selectGoodsCount">0</span> 件</span>
            </div>
            <div class="col-md-1 bottom-menu">
                <span>合计：<span id="selectGoodsMoney">0.00</span></span>
            </div>
            <div onclick="buy()" class="col-md-1 bottom-menu submitData submitDis">
                确认订单
            </div>
        </div>
    </div>
    <!--删除确认弹框-->
    <div class="modal fade" tabindex="-1" role="dialog" id="deleteItemTip" aria-labelledby="gridSystemModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
                </div>
                <div class="modal-body">
                    确认删除此商品？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary deleteSure">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!--是否勾选商品提示-->
    <div class="modal fade" tabindex="-1" role="dialog" id="selectItemTip" aria-labelledby="gridSystemModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
                </div>
                <div class="modal-body">
                    请选择要删除的商品！
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!--批量删除商品-->
    <div class="modal fade" tabindex="-1" role="dialog" id="deleteMultyTip" aria-labelledby="gridSystemModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
                </div>
                <div class="modal-body">
                    确认删除选择的商品！
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary deleteMultySure">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" th:src="@{/static/js/script.js}"></script>
<div style="text-align:center;margin:-50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



<!--      -->


<!--footer-->
<footer class="footer">
    <div class="container">
        <div class="footer_service">
            <ul class="clearfix">
                <li><a href="">1小时快修服务</a></li>
                <li><a href="">7天无理由退货</a></li>
                <li><a href="">30天免费换货</a></li>
                <li><a href="">满200元包邮</a></li>
                <li><a href="">520余家售后网点</a></li>
            </ul>
        </div>

        <div class="footer_link clearfix">
            <dl>
                <dt>帮助中心</dt>
                <dd>购物指南</dd>
                <dd>支付方式</dd>
                <dd>配送方式</dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>购物指南</dd>
                <dd>支付方式</dd>
                <dd>配送方式</dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>购物指南</dd>
                <dd>支付方式</dd>
                <dd>配送方式</dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>购物指南</dd>
                <dd>支付方式</dd>
                <dd>配送方式</dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>购物指南</dd>
                <dd>支付方式</dd>
                <dd>配送方式</dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>购物指南</dd>
                <dd>支付方式</dd>
                <dd>配送方式</dd>
            </dl>

            <div class="footer_contact">
                <p class="phone">18420163207</p>

                <p><span style="">周一至周日 8:00-18:00</span>
                    <span style="display:none;">2月7日至13日服务时间 7:00-18:00</span><br>（仅收市话费）</p>
                <a rel="nofollow" class="btn btn-primary btn-small" href="#">24小时在线客服</a>
            </div>
        </div>

    </div>

    <div class="footer_site">
        <div class="container">
            <div class="cart_log">
                <a href="" title="爱坤商城"></a>
            </div>
            <div>
                <p>底部</p>
            </div>
        </div>
    </div>
</footer>


</body>


<script th:inline="javascript">

    //js提交表单
    function submitData() {
        document.getElementById("form").submit();
    }

    function delGoods(cartid) {

        var flag = confirm('确定移除该商品吗?');
        if(flag==true)
        {
            $.ajax({
                url: "/web/cart/deleteCartBycartId",
                data: {
                    "cartid":cartid
                },
                type: "GET",
                success: function (json) {
                    if(json.code==200)
                    {
                        alert('移除成功');
                        window.location.href='/web/cart/tocart'
                    }else {
                        alert('移除失败');
                    }
                }
            })
        }

    }


    //Ajax异步确认订单

    function buy() {

        var obj = document.getElementsByName("buyGoods");
        var check_val = []; //所有被选中的商品id
        for (k in obj) {
            if (obj[k].checked)
                check_val.push(obj[k].value);
        }

        var array = [];

        for (var i = 0; i < check_val.length; i++) //遍历即将被购买的商品列表
        {
            let goodsItem = document.getElementById('goodsList' + check_val[i]); //被选中的商品的div
            let img = goodsItem.getElementsByClassName('goods-image')[0];
            let info = goodsItem.getElementsByClassName('goods-info')[0];
            let params = goodsItem.getElementsByClassName('goods-params')[0];
            let count = goodsItem.getElementsByClassName('goods-count')[0];
            let total = goodsItem.getElementsByClassName('single-total')[0];


            var obj = {}; //封装对象

            obj['id'] = check_val[i];
            obj['imgUrl'] = img.src;
            obj['goodsInfo'] = info.innerText;
            obj['goodsParams'] = params.innerText;
            obj['goodsCount'] = count.value;
            obj['singleGoodsMoney'] = total.innerText

            array.push(obj);

        }

        var totalMoney=document.getElementById('selectGoodsMoney').innerText;
        var totalCount=document.getElementById('selectGoodsCount').innerText;


        //把数据变成json传到后端
        $.ajax({
            url: "/web/order/getCheckOrderInfo",
            data: {
                js: JSON.stringify(array),
                "totalMoney": totalMoney,
                "totalCount": totalCount
            },
            type: "GET",
            success: function (json) {
                window.location.href='/web/order/toCheckOrder'

            }

        })





    }

    /* 点击按钮，下拉菜单在 显示/隐藏 之间切换 */
    function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
    }

    // 点击下拉菜单意外区域隐藏
    window.onclick = function(event) {
        if (!event.target.matches('.dropbtn')) {

            var dropdowns = document.getElementsByClassName("dropdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    }

    function kefu(e) {
        $.ajax({
            url:'/web/chat/HasGotoKefu',
            dataType:'json',
            type:'get',
            success:function(result){

                if(result==true){
                    window.location.href='http://localhost:5677/chat/toChat';
                }else {
                    alert('当前咨询人数过多,客服都忙不过来了,请等会儿再咨询！')
                }

            },
            error:function () {
                alert('您可能还没有登录,请登录!')
            }
        })

    }
</script>


</html>